<template>
  <div class="app-container">
    <div class="wrap">
      <div class="border" style="padding-right:3px;display: flex;align-items: flex-end ;flex-direction: column">
        <p style="margin-right: 10px;">Q{{qIndex+1}}</p>
        <el-button icon="el-icon-delete" circle    @click="(e, qBody) => {$emit('on-delete-question', e, qIndex)}"></el-button>
      </div>
      <div class="right_zujian" style="width: 100%">
        <div class="danxuan" style="height: 70px;">
          <p  v-show="showadd==false"  @click="add" style="display: block"  >{{qBody.title}}</p>
          <el-input  v-on:blur="blurTitleInput" placeholder="单选题目标题" v-model="qBody.title" v-show="showadd" autofocus />
        </div>
        <el-checkbox-group v-model="qBody.rightAnswerIds">
          <div v-for="item in qBody.answers" style="flex-direction: row;display: flex;align-items: center;margin-left: 10px;height:45px;padding-left: 10px;width: 100%">
            <el-checkbox :label="item.id" style="align-items: center;display:none">&nbsp;</el-checkbox>
            <div style="flex-direction: row;justify-items: center;display: flex">
              <p style="display: block;font-size:14px;width: 100%" v-show="item.isEdit == false" @click="edit(item)">{{item.atitle}}</p>
              <el-input min style="font-size: 14px"   v-on:blur="blurInput(item)"  placeholder="选项1" v-model="item.atitle" v-show="item.isEdit" />

              <el-button  type="text" icon="el-icon-delete" circle @click="deleteOption(item)" v-show="item.isEdit"></el-button>
            </div>
          </div>
        </el-checkbox-group>
        <div style="padding-left: 20px">
          <el-button icon="el-icon-circle-plus"  circle @click="addOption"></el-button>
          <el-button icon="el-icon-edit-outline"  circle @click="addAnswerKeys"></el-button>
        </div>
        <div v-show="showAnswerKeys" style="margin-top: 10px;margin-left: 10px;">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入答案解析"
            v-model="qBody.answerKeys">
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export  default {
    name:'text-tian-kong',
    data(){
      return{
        options:[
          {
            value:0,
            name:'选项1',
            isEdit:false
          },
          {
            value:1,
            name:'选项2',
            isEdit:false
          }
        ],
        lists:[
          {
            value:0,
            name:'选项1',
            isEdit:false
          },
          {
            value:1,
            name:'选项2',
            isEdit:false
          }
        ],
        hide1:false,
        showAnswerKeys:false,
        one:'选项一',
        showadd:false,
        questionTitle:"多选题问题",
        showadd_duoxuan:false,
        danxuanValue:0
      }
    },
    props: {
      qIndex:Number,
      qBody:{
        type: Object,
        required: true
      }
    },
    methods:{
      edit:function(item){
        item.isEdit = true;
        console.log(event.target.parentNode.lastElementChild);
        event.target.parentNode.lastElementChild.style.display="block";
        event.target.parentNode.lastElementChild.lastElementChild.style.display="block";
        event.target.parentNode.lastElementChild.lastElementChild.focus();
      },
      blurInput:function(item){
        //console.log(item);
        if(item.atitle==""){
          item.atitle = "请输入";
        }
        item.isEdit = false;
      },
      addOption:function(){
        let  obj = {id:this.qBody.answers[this.qBody.answers.length-1].id+1,atitle:'填空'+(this.qBody.answers[this.qBody.answers.length-1].id+1),isEdit:false};
        this.qBody.answers.push(obj);
      },
      add(){
        this.showadd=true;
        event.target.parentNode.lastElementChild.style.display="block";
        event.target.parentNode.lastElementChild.lastElementChild.style.display="block";
        event.target.parentNode.lastElementChild.lastElementChild.focus();
      },
      blurTitleInput:function(){
        this.showadd = false;
      },
      addAnswerKeys:function () {
        this.showAnswerKeys = !this.showAnswerKeys;
      },
      deleteOption:function(item){
        let index = 0;
        for(index in this.qBody.answers){
          if(this.qBody.answers[index].id == item.id){
            this.qBody.answers.splice(index,1);
          }
        }
      }
    }
  }
</script>
<style scoped>
  .danxuan,.button{
    text-indent: 2em;
    line-height: 2em;
    width: 100%;
  }
  .wrap{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-items: start;
    overflow: hidden;
  }
  .danxuan{
    border-bottom: 1px solid #eee;
    width: 100%;
    height:50px;
    display: flex;
    align-items: center;
    padding-left: 10px;
  }

  .border{

    min-height: 130px;
    width: 100px;
    text-indent: 3em;
    margin-top: 1.3em;
    border-right: 1px solid #eee;
  }

</style>
